﻿<!-- 产品列表页面 -->
<%- include('common/header.html') %>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="/index/css/productcenter.css" />
<style>
  .header_banner {
    position: relative;
    height: 240px;
    width: 100%;
    /* background-color: rgba(38, 212, 239, 0.7 ); */

    background-image: url('https://ccdn.goodq.top/caches/6519d4c1d4722a0f0d85a70bbee8ffbe/aHR0cHM6Ly81YWViZjhiNjA1OTMxLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTgvMDIvN2YyMmUxYzY4Y2E0ZDJhMDM3NmFlYzRlMzk4YzgzZjYtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp');
    /* background: url(../); */
  }

  .header_content {
    position: absolute;
    left: 50%;
    transform: translateX(-600px);
    margin: auto;
    width: 1200px;
    height: 100%;
  }

  .header_text {
    position: absolute;
    width: 100%;
    height: 120px;
    top: 50%;
    transform: translateY(-60px);
  }

  .withe_solid {
    float: left;
    top: 65px;
    width: 65px;
    border: 3px solid #FFFFFF;
    /* margin-bottom: 20px; */
  }

  .header_title {
    margin-top: 20px;
  }

  .header_title h4 {
    color: #FFFFFF;
    font-size: 34px;
    font-weight: bold;
    vertical-align: bottom;
  }

  .header_text_tot p {
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    color: #FFFFFF;
    padding: 10px 0 0 0;
    vertical-align: bottom;
  }

  .section-background-overlay {
    background-color: #f7f7f7;
  }

  .itembody {
    margin: 10px 10px 40px 10px;
  }

  .post-thumb {
    width: 584px;
    height: 304px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /* margin-bottom: 10px;
     */
    padding-bottom: 25px;
  }

  .post-thumb {
    /* margin: auto; */
  }

  .post-title {
    text-align: center;
  }

  * {}

  a:hover {
    text-decoration: none;
  }

  .read_more_wrapper {
    text-align: center;
  }

  .read_more_wrapper a {
    color: #3fd8e2;
    font-size: 13px;
    font-family: 微软雅黑;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .boder-skyblue-link {

    border: 2px solid #3fd8e2;
  }

  .project_class_header_nav {
    width: 100%;
    /* height: 74px; */
    position: relative;
    text-align: center;
  }

  .project_class_header_nav ul {
    /* margin-top: 10px; */
  }

  .project_class_header_nav ul li {
    display: inline-block;
    /* height: 2em; */
    padding-top: 10px;
    margin-top: 10px;
    margin-right: 10px;
  }

  .project_class_header_nav ul li h4 {
    font-weight: normal;
    font-size: 24px;
    /* line-height: 2em; */
  }

  .project_class_header_nav ul li h4 a {
    color: #898989;

  }

  .project_class_header_nav ul li h4 a:hover {
    color: #5DDFFE;
  }


  /* 分页 */
  .button_nav_page {
    border-top: 1px solid #bbb;
    text-align: center;
  }

  .pagination>li>a,
  .pagination>li>span {
    padding: 10px;
    margin-left: 10px;
  }

  .entry-content .project_text_down {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .foot_text {
    color: rgb(128, 128, 128);
  }
  .lastfoot{
    color: #696969;
    font-size: 12px;
  }
</style>

<!-- banner模块开始 -->
<!-- 内容头部的banner开始 -->
<div class="header_banner">
  <div class="header_content">
    <div class="header_text">
      <div class="withe_solid w">
      </div>
      <div class="header_title">
        <h4>产品服务</h4>
      </div>
      <div class="header_text_tot">
        <p>强人工智能人脸识别系统</p>
      </div>
    </div>
  </div>
</div>
<!-- 内容头部的banner结束 -->
<!-- banner模块结束 -->
<!-- 导航 -->
<div class="section-background-overlay">

  <!-- 产品分类导航 -->
  <div class="project_class_header_nav">

    <ul class="pc_list">

      <li>
        <h4> <a href="/project">全部</a> </h4>
      </li>
      <% projectClass.forEach(item => { %>
      <li>
        <h4><a href="/project?id=<%= item.pc_id %>"><%= item.pc_name %> </a> </h4>
      </li>
      <% }) %>
    </ul>
  </div>

  <hr style="height: 1px;border:none;border-top:1px solid #555555">
  <!-- 产品中心开始 -->

  <div class="container">
    <div class="row qfe_row">
      <div data-animaleinbegin="bottom-in-view" data-animalename="qfyfadeInUp" data-duration="" data-delay=""
        class="qfy-column-2-62a8aedfc8bb5541716 qfy-column-inner vc_span12 text-default col-md-12 small-screen-center fullrow"
        data-dw="1/1" data-fixheight="">
        <div style="position: relative" class="column_inner">
          <div class="background-overlay grid-overlay-" style="background-color: transparent; width: 100%"></div>
          <div class="column_containter" style="z-index: 3; position: relative">
            <div id="" data-loading="" data-loading-w="" data-open="" data-post="products" data-cate=""
              m-padding="16px 0 0 0" p-padding="0 0 0 0" css_animation_delay="0" qfyuuid="qfy_posts_grid_y3hht-c-1l"
              class="qfy-element ProductCenterCSS qfe_teaser_grid qfe_content_element qfe_grid columns_count_2 columns_count_2 qfe_teaser_grid_products">

              <div class="qfe_wrapper">
                <div class="teaser_grid_container noanimale" style="clear: both" data-type="products" data-cate=" "
                  data-pcate="">
                  <ul style="min-height: 60px" class="qfe_thumbnails qfe_thumbnails-fluid vc_clearfix post_grid"
                    data-layout-mode="fitRows">
                    <% project.forEach(item => { %>
                    <a href="/productydetails?id=<%= item.pi_id %> ">
                      <li data-postid="9680" data-animaleinbegin="90%" data-animalename="qfyfadeInUp" data-delay="0"
                        data-duration="" class="isotope-item qfy_item_post vc_span6 vc_span_mobile vc_span_mobile6"
                        style="max-width: 49.9%; margin-bottom: 20px; padding-bottom: 20px">
                        <div class="itembody itempcbody" style="
                            border-top: 0px solid rgba(255, 255, 255, 1);
                            border-bottom: 0px solid rgba(255, 255, 255, 1);
                            border-left: 0px solid rgba(255, 255, 255, 1);
                            border-right: 0px solid rgba(255, 255, 255, 1);
                            background-color: #ffffff;
                          ">
                          <div class="post-thumb blog-media wf-td">
                            <img data-t-id="14425" class="ag_image" src="<%= item.pi_img %>"
                              alt="shutterstock_79760391100" width="400px" height="300px" description=""
                              data-attach-id="14425" data-title="shutterstock_79760391100" title="" src-img="" />
                            <i></i>
                          </div>
                          <div class="post-title">
                            <p data-title="true" style="
                                color: #373a41;
                                font-size: 18px;
                                font-family: 微软雅黑;
                                line-height: 24px;
                              " class="bitImageAhover link_title" title="<%= item.pi_name %>">
                              <%= item.pi_name %>
                            </p>
                          </div>
                          <div class="entry-content post_excerpt" style="
                              color: #b7b7b7;
                              font-size: 13px;
                              font-family: 微软雅黑;
                              line-height: 22px;
                              padding-left: 10px;
                              padding-right: 10px;
                            ">
                            <p class="project_text_down">
                              <%= item.pi_title %>
                            </p>
                            <br />
                          </div>


                          <!-- 查看详情 -->

                          <div class="read_more_wrapper">
                            <a href="" class="boder-skyblue-link">查看详情</a>
                          </div>
                        </div>
                      </li>
                    </a>
                    <% }) %>

                  </ul>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部分页 -->
    <nav aria-label="Page navigation" class="button_nav_page">
      <ul class="pagination">
        <li>
          <a href="/project?id=<%= id %>&limit=4&page=<%= (page-1)<=0?1:(page-1) %>" aria-label="Previous">
            <span aria-hidden="true">上一页</span>
          </a>
        </li>
        <!-- 数据渲染实现页数 -->
        <% for( let index = 1; index <= countPage; index++ ) { %>
        <% if ((page)==index) { %>
        <li class="active"><a href="/project?id=<%= id %>&limit=4&page=<%= index %>"><%= index %> </a> </li>
        <% } else { %>
        <li><a href="/project?id=<%= id %>&limit=4&page=<%= index %>"><%= index %> </a> </li>

        <% } %>

        <% } %>
        <li>
          <a href="/project?id=<%= id %>&limit=4&page=<%= (page-0+1)>=countPage?countPage:(page-0+1) %>"
            aria-label="Next">
            <span aria-hidden="true">下一页</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- 底部分页 -->
  </div>
</div>
<%- include('common/footer.html') %>

</body>

</html>